<template>
	<view class="page_bg_FAFAFA">
		<view class="padd-top48">
			<textarea v-model="contentText" class="txtarea" placeholder="请写下您的问题和建议" placeholder-style="color:999;"></textarea>
		</view>
		<view @click="clickSubmit" class="btn">
			提交
		</view>
		<view class="cr-333 font_s30 padd-left34 padd-right34 mar-top50 font_w500">
			留言记录
		</view>
		<view class="me-list">
			<view v-for="(item,index) in list" :key="index" class="me-item mar-top31 mar-bottom20">
				<view class="flex align-center justify-between">
					<view class="cr-333 font_s26 font_w600">
						{{item.contentText}}
					</view>
					<view class="cr-999 font_s24 font_w500">
						{{item.createTime}}
					</view>
				</view>
				<view v-if="item.status == 1" class="me-content">
					<view class="cr-333 font_s26">
						回复：{{item.reply}}
					</view>
					<view class="me-time cr-999 font_s24">
						2023-01-02
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				page:{
					page:1,
					limit:20
				},
				noMore:false,
				contentText:''
			};
		},
		onLoad() {
			this.getList()
		},
		onReachBottom() {
			!this.noMore && this.getList()
		},
		methods:{
			getList(){
				this.$http.get('/yaolexue-service-portal/leaveMessage/pageLeaveMessage',{
					...this.page
				}).then(res => {
					if(res.code === 200){
						if(this.page.page == 1) this.list = []
						this.list = [...this.list,...res.data.items]
						this.noMore = this.list.length >= res.data.total
						this.page.page++
					}
				})
			},
			clickSubmit(){
				if(this.contentText){
					this.$http.post('/yaolexue-service-portal/leaveMessage/addLeaveMessage',{
						contentText:this.contentText
					}).then(res => {
						if(res.code == 200){
							uni.showToast({
								title:'none',
								title:'提交成功'
							})
							this.page.page = 1
							this.getList()
						}else{
							uni.showToast({
								title:'none',
								title:res.message
							})
						}
					})
				}else{
					uni.showToast({
						icon:'none',
						title:'请写下您的问题和建议'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.txtarea{
		width: 650rpx;
		height: 329rpx;
		background: #F3F3F3;
		border-radius: 20rpx;
		padding: 31rpx 26rpx;
		margin: auto;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333;
	}
	.upbox{
		width: 153rpx;
		height: 153rpx;
		background: #F3F3F3;
		border-radius: 20rpx;
		margin: 10rpx 8rpx 0 0;
	}
	.btn{
		width: 561rpx;
		height: 86rpx;
		background: #FA312A;
		border-radius: 43rpx;
		position: absolute;
		bottom: 150rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		left: 50%;
		transform: translateX(-50%);
	}
	.me-list{
		padding: 0 50rpx;
		.me-item{
			padding-bottom: 50rpx;
			border-bottom: 1rpx solid #E1E1E1;
			.me-content{
				width: 100%;
				background: #F3F3F3;
				border-radius: 20rpx;
				padding: 19rpx 32rpx;
				position: relative;
				.me-time{
					position: absolute;
					right: 4rpx;
					bottom: 26rpx;
				}
			}
		}
	}
</style>
